
<template>
  <div class="templateJD" :id="'templateJD-'+myid">
    <div class="row1 row">
      <div class="b1">
        <div>950616 www.jdl.com</div>
        <div class="b1-black">{{item["产品"]}}</div>
        <div>{{moment().format('yyyy-MM-DD HH:mm:ss')}}</div>
      </div>
      <div class="b2">
        <canvas :id='"tm1-"+myid'></canvas>
        <div class="b2-dh">{{item["快递单号"]}}</div>
      </div>
    </div>
    <div class="row2 row">
      <div class="b0">{{item['始发分拣地']}}</div>
      <div class="b2">{{item["目的分拣地"]}}</div>
      <div class="b1">{{item["始发滑道笼车"]}}</div>
      <div class="b3">{{item["目的分拣滑道笼车号"]}}</div>
    </div>
    <div class="row3 row">
      <div class="b1">
        <div class="b1-1">
          <div>{{item["集包地"]}}</div>
          <div></div>
        </div>
        <div class="b1-2">{{item["站点名称"]}} {{item["路区号"]}}</div>
      </div>
      <div class="b2">{{item["路区号"]}}</div>
    </div>
    <div class="row4 row">
      <div class="b1">收</div>
      <div class="b2">{{item["收件人名称"]}} {{item["收件人电话"]}}</div>
    </div>
    <div class="row5 row">
      {{item["收货人地址"]}}
    </div>
    <div class="row6 row">
      <div class="b1">寄</div>
      <div class="b2">{{item["寄件人信息"]}}</div>
    </div>
    <div class="row7 row">
      <div class="">
        <canvas :id='"tm2-"+myid'></canvas>
        <div class="b2">{{item["快递单号二"]}}</div>
      </div>
    </div>
    <div class="row8 row">
      订单号<span style="margin-left: 40px;font-size: 40px;">{{item["快递单号二"]}}</span>
    </div>
    <div class="row9 row">
      已验视
    </div>
    <div class="row10 row">
      <div class="b1">总件数 <span style="margin-left: 40px">{{item["订单总数量"]}}</span></div>
      <div class="b2">{{item["订单波次序号"]}}</div>
      <div class="b3">{{item["物料信息"]}}</div>
    </div>

  </div>


</template>

<style scoped lang='scss'>
$w: 810px;
$h: $w * 1.8185;
.templateJD{
  scale: 37.25%;
  transform-origin: 0 0;
  width: $w;
  border: 1px solid black;
  text-align: center;
  font-weight: bolder;
  .row{
    border: 1px solid black;
  }
  .row1{
    .b1{
      display: grid;
      grid-template-columns: 2fr 1fr;
      font-size: 36px;
      font-weight: 100;
      .b1-black{
        grid-row: 1/3;
        grid-column: 2/2;
        background-color: black;
        color: #fff;
        font-size: 68px;
      }
    }
    .b2{
      margin: 26px 0 0 0;
      .b2-dh{
        font-size: 40px;
      }
    }
  }
  .row2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 26px;
    font-weight: bold;
    .b1{
      font-size: 43px;
      border-right: 2px solid black;
    }
    .b0{
      border-right: 2px solid black;
    }
    .b2{

    }
    .b3{
      font-size: 43px;
    }
  }
  .row3{
    display: flex;
    font-size: 33px;
    div{
      border: 1px solid black;
    }
    .b1{
      width: 80%;
      .b1-1{
        display: flex;
        border-top: 0px;
        div:nth-child(1){
          padding: 0 10px;
        }
      }
      .b1-2{
        font-weight: bold;
        border-bottom: 0px;
      }
    }
    .b2{
      width: 20%;
      font-size: 60px;
      font-weight: bold;
    }
  }
  .row4{
    font-size: 34px;
    display: grid;
    grid-template-columns: 1fr 7fr;
  }
  .row5{
    font-size: 34px;
    max-height: 220px;
    font-weight: bold;
    padding: 20px 0;
  }
  .row6{
    display: grid;
    grid-template-columns: 1fr 7fr;
    font-size: 28px;
    padding: 20px 0;
  }
  .row7{
    padding: 20px 0 10px 0;
    position: relative;
    .b2{
      font-size: 40px;
      position: relative;top: -15px;
    }
  }
  .row8{
    padding: 20px 37px 20px;
    text-align: left;
    font-size: 30px;
  }
  .row9{
    padding: 20px 45px 20px 0;
    text-align: right;
    font-weight: bold;
    font-size: 34px;
  }
  .row10{
    font-size: 32px;
    padding: 20px 0;
    .b1{
      padding: 0 37px 0;
      text-align: left;
    }
    .b2{
      margin: 20px 0;
    }
    .b3{
      margin: 20px 0;
    }
    div{
      line-height: 32px;
    }
  }
}
</style>
<script setup>
import moment from 'moment';

import {ref} from 'vue'


const item = ref({
  "订单波次序号": "1/50012",
  "订单总数量": "1",
  "收货人地址": "北京市北京市丰台区亚林西居住区8号院五号楼二单元1904",
  "寄件人地址": " ",
  "快递单号": "JDVB22848094030-1-1-",
  "收件人名称": "高**",
  "快递单号二": "JDVB22848094030",
  "出库单号": "J000172344",
  "目的分拣滑道笼车号": "目的分拣滑道笼车号",
  "站点名称": "◆北京开阳里营业部",
  "寄件人信息": "沃尔玛香港有限公司 400-633-6868",
  "二维码": "https://mp.weixin.qq.com/a/~bdyFWnK5nG7Ly5w-xXbAYg~~",
  "集包地": "【集】杭州东洲",
  "目的分拣地": "目的分拣地",
  "产品": "1",
  "路区号": "024",
  "始发滑道笼车": "始发滑道笼车",
  "物料信息": "2756/1 ",
  "收件人电话": "134****8718",
  "始发分拣地": "始发分拣地"
})
const info =ref(item.value)
const myid = 1

</script>